<template>
  <div class="carousel">
    <div class="slides">
      <div 
        v-for="(slide, index) in slides" 
        :key="index"
        class="slide"
        :class="{ active: currentIndex === index }"
      >
        <img :src="slide.image" :alt="slide.title">
        <div class="slide-content">
          <h3>{{ slide.title }}</h3>
          <p>{{ slide.description }}</p>
        </div>
      </div>
    </div>
    <button class="prev" @click="prevSlide">❮</button>
    <button class="next" @click="nextSlide">❯</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const currentIndex = ref(0);
const slides = ref([
  {
    image: 'https://via.placeholder.com/800x400?text=Slide+1',
    title: '平台优势1',
    description: '描述平台的第一大优势'
  },
  {
    image: 'https://via.placeholder.com/800x400?text=Slide+2',
    title: '平台优势2',
    description: '描述平台的第二大优势'
  },
  {
    image: 'https://via.placeholder.com/800x400?text=Slide+3',
    title: '平台优势3',
    description: '描述平台的第三大优势'
  }
]);

const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % slides.value.length;
};

const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length;
};

onMounted(() => {
  setInterval(nextSlide, 5000);
});
</script>

<style scoped>
.carousel {
  position: relative;
  max-width: 100%;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #e0f2fe;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  position: relative;
}

.slide img {
  width: 100%;
  height: auto;
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30, 64, 175, 0.8);
  color: white;
  padding: 2rem;
}

.slide-content h3 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.slide-content p {
  font-size: 1.125rem;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  z-index: 10;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}
</style>